<template>
    <div
        v-show="showPlayer"
        :class="['svga-box', showPlayer && 'svga-player-box', overlay && 'overlay']"
        @click="onStopPreview">
        <canvas
            id="canvasContainerId"
            class="svga-player"></canvas>
    </div>
</template>
<script lang="ts" setup>
    import { onMounted, ref, onUnmounted } from 'vue';
    import { Player, DB } from 'svga-web';
    import { showLoadingToast } from 'vant';
    import { playSvga } from '~/utils';

    const props = withDefaults(
        defineProps<{
            stopWhenClick?: boolean;
            overlay?: boolean;
        }>(),
        {
            stopWhenClick: true,
            overlay: true,
        }
    );
    // Emits
    const emit = defineEmits(['stop']);

    let svgaPlayer: any = null;
    let svgaDB: any = null;
    let toastId: any;
    onMounted(() => {
        svgaPlayer = new Player('#canvasContainerId');
        svgaPlayer.set({
            cacheFrames: true,
            loop: 1,
        });
        svgaDB = new DB();
    });

    const showPlayer = ref(false);
    const playing = ref(false);
    /**
     * @param {string} svgaId:required 必要的唯一标识
     * @param svgaData 需要播放的svga数据 或 url
     * @param option 播放器配置项
     */
    const onPlay = (svgaId: any, svgaData: any, option: any) => {
        const _option = {
            ...option,
            _mountBeforeCallback: () => {
                toastId = showLoadingToast({
                    duration: 60 * 1000,
                    message: 'loading...',
                    forbidClick: true,
                });
                option?.mountBeforeCallback?.();
            },
            _startBeforeCallback: () => {
                toastId?.close?.();
                showPlayer.value = true; // 播放器显示状态
                playing.value = true; // 播放状态
                option?.startBeforeCallback?.();
            },
            _endCallback: () => {
                showPlayer.value = false; // 播放器显示状态
                playing.value = false; // 播放状态
                option?.endCallback?.();
            },
            _failCallback: () => {
                toastId?.close?.();
                showPlayer.value = false; // 播放器显示状态
                playing.value = false; // 播放状态
                toastId = showLoadingToast({
                    type: 'html',
                    duration: 5000,
                    message: `<div>Preview Failed!</div><div style="margin-top: 0.5rem;">Please try again!</div>`,
                });
                option?.failCallback?.();
            },
            isSvgaData: typeof svgaData !== 'string',
            svgaId,
        };
        playSvga(svgaPlayer, svgaData, _option, svgaDB);
    };

    const onStopPreview = () => {
        if (props.stopWhenClick && playing.value) {
            showPlayer.value = false; // 播放器显示状态
            playing.value = false; // 播放状态
            svgaPlayer.stop();
            emit('stop');
        }
    };

    onUnmounted(() => {
        if (toastId) {
            showPlayer.value = false;
            playing.value = false;
            toastId?.close?.();
            svgaPlayer?.stop();
        }
    });

    defineExpose({
        onPlay,
        onStopPreview,
    });
</script>

<style scoped>
    .svga-box {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 2009;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 100vh;
        align-content: center;
    }

    .svga-player {
        position: relative;
        z-index: 1;
        width: 8rem;
        height: auto;
    }

    .overlay::before {
        position: fixed;
        top: 0;
        left: 0;
        display: block;
        width: 100vw;
        height: 100vh;
        background-color: rgb(0 0 0 / 80%);
        content: '';
    }
</style>
